<template>
  <div>
    <public-head :title="title" :path="path" />
    <van-tabs  v-model="active" color = "#198AFF" line-width="20px"
            title-active-color = "#198AFF" title-inactive-color="#999"
            >
            <van-tab title="上下班打卡">
              <div :style="{ height: '220px' }" class="commuting">
                <van-slider v-model="value" vertical @change="onChange" range />
                 
              </div>
            </van-tab>
            <van-tab title="外出打卡">
                  <!-- <van-dropdown-menu>
                    <van-dropdown-item v-bind:title="dropdownItemTitle" ref="item">
                      <van-cell-group>
                        <van-cell
                          v-for="item in equipCells"
                          :key="item.equipId"
                          v-bind:title="item.equipName"
                          v-bind:value="item.equipId"
                          v-bind:label="item.equipNo"
                          @click="choseEquip(item.equipId ,item.equipNo, item.equipName)"/>
                      </van-cell-group>
                    </van-dropdown-item>
                  </van-dropdown-menu> -->
                  
            </van-tab>
        </van-tabs>
  </div>
</template>

<script>
import PublicHead from "../../../components/PublicHead";

export default {
  components: {
    PublicHead,
  },
  name:'DaKa',
  data() {
    return {
      active:0,
      title: " 我的消息",
      path: "daka",
      value:[0],
      // equipCells:[
      //   {equipName:" 姓名"},
      //   {equipId:" 1"},
      //   {equipNo:" 年后"},
      // ],
      // dropdownItemTitle:"上阿布呢"
    };
  },
  methods: {
    onChange(value){
      console.log(value,'---');
    },
    // choseEquip(equipId, equipNo, equipName) {
    //   this.dropdownItemTitle = `${equipName}-${equipNo}`;
    //   this.equipId = equipId;
    //   this.equipNo = equipNo;
    //   this.equipName = equipName;
    //   this.handleMoreLoading();
    //   // 模拟主元素点击事件，实现选择后下拉菜单收起
    //   const e = document.createEvent('MouseEvents');
    //   e.initEvent('click', true, true);
    //   document.getElementById('panel').dispatchEvent(e);
    // },
  },

}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.commuting{
  padding 20px
  box-sizing border-box
  margin-top 10px 
  background-color #fff
}
</style>